<template>
    <div id="container">
      <div id="viewDiv"></div>
    </div>
</template>

<script setup>
/*整体思路:
  1:创建要素图层并从服务url中获取数据
  2:创建草图工具对象并关联图形图层
  3:给开视图对象的click事件添加回调函数,当点击到特定图层的要素时,克隆该要素并在图形图层显示该要素的高亮形式
  4:如果点击到高亮形式的图形,则执行对该图形的几何更新,更新完成后,使用相应方法更新到服务图层的相应要素
*/
import * as 天地图 from '../天地图'
import {onMounted} from 'vue'
import Map from '@arcgis/core/Map'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import MapView from '@arcgis/core/views/MapView'
import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
var map,view,要素图层,sketchViewModel,graphicsLayer
onMounted(()=>{
  graphicsLayer=new GraphicsLayer()//创建图形图层对象
  要素图层 = new FeatureLayer({//创建要素图层对象
    url:"https://ws8575.club/web/rest/services/Hosted/地图发布测试_要素图层_查询上限2W_3857/FeatureServer/0",
    //核心属性:"objectid","name","address","一级类","二级类"
    title:"AOI图层",
    outFields:["*"],
    renderer:{
      type:"simple",
      symbol:{
        type:"simple-fill",
        color:[0,0,0,0.2],
        outline:{
          color:[255,255,255,0.8],
          width:0.5
        }
      }
    }
  })
  map=new Map({//创建地图对象
    basemap:{
      baseLayers:天地图.天地图矢量
    },
    layers: [要素图层,graphicsLayer]//添加要素图层和图形图层
  })
  view = new MapView({//创建视图对象
    map: map,  container: "viewDiv",
    scale:5000, center: [120.4, 36.1],
    constraints:{
        minScale:5000000,
        maxScale:1300,
        rotationEnabled:false
    }
  })
  sketchViewModel=new SketchViewModel({//创建草图工具对象
    view:view,//绑定视图
    layer:graphicsLayer,//绑定图形图层
    defaultUpdateOptions:{//点击图形后对该图层应用的默认的更新工具为"reshape"(重塑,或编辑折点)
      tool:"reshape"
    },
  })
  view.on("click", function(event) {//视图click事件创建回调函数
    view.hitTest(event).then(function(response) {//测试是否点击到了可识别的元素(比如图形图层或要素图层的图层)
      graphicsLayer.graphics.removeAll()//首先移除所有高亮显示的图形(如果有)
      if(response.results[0]?.graphic.layer===要素图层){//判断点击到的顶部元素是否是特定要素图层的要素
        var graphic={//创建一个图形,
          symbol:{//设置符号为透明,如果不设置则系统会给予默认符号,因为更新该要素会自动赋予高亮,所以这里设置为透明即可
            type:'simple-fill',
            color:[0,0,0,0],
            outline:{
                width:0
            }
          },
          geometry:response.results[0]?.graphic.geometry,//从点击到的顶部元素中获取几何和属性信息
          attributes:response.results[0]?.graphic.attributes
        }
        graphicsLayer.add(graphic)//向图层图层添加这个要素
        sketchViewModel.update(graphicsLayer.graphics.items[0],{//对点击到的要素开启更新并设置当前更新工具为"reshape"
          tool:"reshape"
        })
      }
    })
  })
  sketchViewModel.on("update",(event)=>{//更新完成事件的回调函数,执行要素图层的applyEdits方法完成更新
    if(event.state==="complete"){
      要素图层.applyEdits({
        updateFeatures:[graphicsLayer.graphics.items[0]]//实际上是基于图形的oid字段的属性完成了更新并覆盖了服务中相应图形的geometry属性
      })
    }
  })
})//onMounted()结尾
</script>

<style scoped>
#viewDiv,#container{
  height:100%;width:100%;padding:0;margin:0;
}
</style>
  